<template>
    <div class="todo-footer">
        <label>
            <input type="checkbox" v-model="isCheckAll">
        </label>
        <span>
            <span>已完成{{ count }}</span> / 全部 {{ todos.length }}
        </span>
        <button class="btn btn-danger" @click="() => { clearAllCompletedTodos() }">清除已完成任务</button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { ITodo } from '@/types/todo'

export default defineComponent({
    name: 'Footer',
    props: {
        todos: {
            type: Array as () => ITodo[],
            required: true,
        },
        checkAll: {
            type: Function,
            required: true,
        },
        clearAllCompletedTodos: {
            type: Function,
            required: true
        }

    },
    setup(props) {
        // 已完成的 用计算属性做
        const count = computed(() => {
            // return props.todos.filter(item => item.isCompleted).length
            return props.todos.reduce((pre, current) => pre + (current.isCompleted ? 1 : 0), 0)
        })

        // 全选不全选的操作，也用计算属性做
        const isCheckAll = computed({
            get() {
                return count.value > 0 && props.todos.length == count.value
            },
            set(val) {
                props.checkAll(val)
            }
        })

        return {
            count,
            isCheckAll
        }
    }
})

</script>

<style scoped lang="scss">
.todo-footer {
    padding-left: 6px;
    display: flex;
    align-items: center;
    width: 100%;

    label {
        display: inline-block;
        cursor: pointer;
        height: 23px;
        line-height: 25px;

        input {
            position: relative;
            top: -1px;
            vertical-align: middle;
            margin-right: 5px;
        }
    }

    button {
        margin-left: auto;
        cursor: pointer;

        &:hover {
            color: lightcoral;
        }
    }
}
</style>